<template>
    <div class="main">
        <div class="top_box">
            <el-input style="width:200px" placeholder="搜索用户信息" v-model="search"></el-input>
           <!-- <div style="width:200px;margin-left:10px">
                <el-select v-model="isAnswer" placeholder="请选择">
                    <el-option v-for="item in isAnswerList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <el-select v-if="!(role==18||role==19)" style="width:200px;margin-left:10px" v-model="admin_id" placeholder="请选择管理中心" :disabled="cascaderList.length != 0">
                <el-option v-for="item in adminUserList" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            <div v-if="!(role==18||role==19)" style="width:200px;margin-left:10px">
                <el-cascader :props="props" placeholder="请选择收费站/服务区" :show-all-levels="false" v-model="cascaderList" :disabled="!!admin_id" clearable></el-cascader>
            </div>
            <div v-else>
                <el-input style="width:200px;margin-left:10px" placeholder="请输入收费站/服务区" v-model="name"></el-input>
            </div> -->
            <div style="width:400px;margin-left:10px">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-button type="warning" style="margin-left:20px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:20px" size="small" @click="reset" type="primary">重置</el-button>
            <el-button type="primary" style="margin-left:20px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>
        </div>
        <el-table :data="data" style="width: 100%" border height="100%">
            <!-- <el-table-column type="index">
            </el-table-column> -->
            <el-table-column prop="id" label="ID" width="100">
            </el-table-column>
            <el-table-column label="头像">
                <template slot-scope="{row}">
                    <el-image style="width:60px;height:60px" :src="row.avatar" :preview-src-list="[row.avatar]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号">
            </el-table-column>
            <el-table-column label="绑定管理中心">
                <template slot-scope="{row}">
                    {{ row?.nickname }}
                </template>
            </el-table-column>
            <el-table-column label="收费站/服务区">
                <template slot-scope="{row}">
                    {{ row?.p_road_name }}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="prize_num" label="抽奖次数"></el-table-column> -->
            <el-table-column prop="prize_num" label="答题状态">
                <template slot-scope="{row}">
                    {{ row.is_answer == 1 ? "未答题" : "已答题" }}
                </template>
            </el-table-column>
            <el-table-column prop="answer_num" label="问卷次数"></el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="{row}">
                    {{ computedTime(row.createtime) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="中奖信息" width="200">
                <template slot-scope="{ row }">
                    <!-- <el-button type="warning" @click="edit(row)">编辑</el-button> -->
                    <el-button v-if="row.prize ? row.prize.type == 1 : false" type="primary" @click="winningRecord(row)">查看中奖记录</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表单 -->
        <el-dialog :visible.sync="dialogVisible" title="编辑" append-to-body width="600px" @close="formReset">
            <el-form ref="form" :model="form" label-width="80px">
                <el-row type="flex" :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="头像" prop="avatar">
                            <el-upload-image v-model="form.avatar"></el-upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="form.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-button type="primary" @click="initiate()">发布</el-button>
                    <el-button @click="formReset()">重置</el-button>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 中奖记录 -->
        <el-dialog :visible.sync="dialogVisible1" title="中奖记录" append-to-body width="1000px">
            <el-table :data="winningList" style="width: 100%" border>
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号">
                </el-table-column>
                <el-table-column prop="prize" label="中奖奖项">
                </el-table-column>
                <el-table-column prop="desc" label="奖品描述">
                </el-table-column>
                <el-table-column prop="money" label="中奖话费金额">
                </el-table-column>
                <el-table-column prop="create_time" label="中奖时间">
                    <template slot-scope="{row}">
                        {{ computedTime(row.create_time) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- <div class="inAll">
            <span>共计答题：</span><span>{{ answer_num }}次</span>
        </div> -->
        <!-- 分页 -->
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
import queryString from "qs"
export default {
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            total: 0,
            limit: 10,
            page: 1,
            search: "",
            role: localStorage.getItem("role"),
            cascaderList: "",
            time: [],
            name: "",
            isAnswer: "",
            data: [],
            answer_num: "",
            dialogVisible: false,
            dialogVisible1: false,
            adminUserList: [],
            admin_id: "",
            form: {
                avatar: [],
                username: '',
                mobile: ""
            },
            winningList: [],
            isAnswerList: [
                {
                    id: '1',
                    name: "未答题"
                },
                {
                    id: '2',
                    name: "已答题"
                }
            ],
            props: {
                label: "nickname",
                value: "id",
                lazy: true,
                async lazyLoad(node, resolve) {
                    const { level, value } = node;
                    if (level === 0) {
                        const result = await post({
                            url: "/admin/answer.Subject/admin_list",
                            data: {
                                limit: 999,
                            }
                        });
                        resolve(result);
                    }
                    else if (level === 1) {
                        const result = await post({
                            url: "/admin/answer.Road/index",
                            data: {
                                admin_id: value,
                                limit: 999,
                            }
                        });
                        result.data.forEach((item) => {
                            // item.leaf = true
                            item.nickname = item.road_name
                        });
                        console.log(result.data, 1)
                        resolve(result.data);
                    }
                    else if (level === 2) {
                        console.log(node, "node");
                        const result = await post({
                            url: "/admin/answer.Road/act_road",
                            data: {
                                road_id: node.data.id,
                                limit: 999
                            }
                        });
                        console.log(result, "aaaaa");
                        result.data.forEach((item) => {
                            item.leaf = true
                            item.nickname = item.name
                        });
                        resolve(result.data);
                    }

                },
            }
        }
    },
    methods: {
        // 请求初始数据
        getInfo(index = 1) {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            post({
                url: "/admin/user.User/index",
                data: {
                    page: index,
                    limit: this.limit,
                    search: this.search,
                    is_answer: this.isAnswer,
                    admin_id: this.admin_id,
                    // road_id: this.cascaderList[1],
                    p_road_id: this.cascaderList[2] || "",
                    time,
                    name: this.name
                },
                loading: true,

            }).then(res => {
                console.log(res);
                this.answer_num = res.answer_num
                this.total = res.total          //总数
                this.data = res.list;
            })
        },
        // 获取管理中心列表
        adminUser() {
            post({
                url: "/admin/answer.Subject/admin_list"
            }).then(res => {
                this.adminUserList = res
            })
        },
        // 编辑数据
        edit(row) {
            this.formReset()
            this.dialogVisible = true
            let form = JSON.parse(JSON.stringify(row))
            form.avatar = [{ url: row.avatar, name: row.avatar }]
            this.form = form
            // this.form.username = form.username
            // this.form.mobile = form.mobile
            // this.form.id = form.id
        },
        // 表单提交
        initiate() {
            let data = JSON.parse(JSON.stringify(this.form))
            data.avatar = data.avatar[0].url
            post({
                url: "/admin/user.User/edit",
                data,
                loading: true,
                successTip: true,
            }).then(res => {

            }).finally(() => {
                this.dialogVisible = false
                this.getInfo(this.page)
            })
        },
        // 查看中奖记录
        winningRecord(row) {
            post({
                url: "/admin/answer.Prize/prize_log",
                data: {
                    uid: row.id
                }
            }).then(res => {
                console.log(res);
                this.winningList = res.list.data
                this.dialogVisible1 = true
            })
        },
        // 表单关闭回调
        formReset() {
            this.form = Object.assign({}, this.$options.data().form)
        },
        // 重置
        reset() {
            this.search = ""
            this.isAnswer = ""
            this.time = []
            this.cascaderList = []
            this.admin_id = ""
            this.name = ""
            this.getInfo()
        },
        // 导出
        leadingOut() {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            if (localStorage.getItem('role') && localStorage.getItem('id')) {
                open("http://nhcj.app65.cn/api/realmerit/user_export?" + queryString.stringify({
                    id: localStorage.getItem('id'),
                    role: localStorage.getItem('role'),
                    search: this.search,
                    time,
                    name: this.name,
                    is_answer: this.isAnswer,
                    admin_id: this.admin_id,
                    p_road_id: this.cascaderList[2] || "",
                }))
            }
        },
    },
    computed: {
        computedTime() {
            return (time) => {
                let date = new Date(time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let sdate = ("0" + date.getDate()).slice(-2);
                let hour = ("0" + date.getHours()).slice(-2);
                let minute = ("0" + date.getMinutes()).slice(-2);
                let second = ("0" + date.getSeconds()).slice(-2);
                // 拼接
                let result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;
                // 返回
                return result;
            };
        },
    },
    mounted() {
        this.getInfo()
        this.adminUser()
    },

}

</script>

<style scoped lang="scss">
.inAll {
    width: 100%;
    // background-color: rgba(20, 31, 59, 0.6) !important;
    box-shadow: inset 0 0 1rem #fff !important;
    border: 1px solid #000;
    border-top: none;
    background: #fff;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #000;

    & span:first-child {
        font-size: 24px !important;
    }

    & span:last-child {
        font-size: 20px !important;
    }
}

::v-deep .el-date-editor {
    width: 100%;
}
</style>
